<template>
  <div class="main">
    <div class="inner">
      <el-row :gutter="30">
        <el-col class="left" :md="10" :xs="24">
          <div class="leftCont wow fadeInLeft">
            <div class="head">{{ $t('ismsg.pledge.title') }}</div>
            <p class="text fs-12">{{ $t('ismsg.pledge.text') }}</p>
            <div class="btn" @click="handleClickBtn">
              {{ $t('ismsg.pledge.btn') }}
              <span>300%</span>
            </div>
          </div>
        </el-col>
        <el-col class="right" :md="14" :xs="24">
          <div class="rightCont wow fadeInRight">
            <img src="@/assets/images/fox.png" alt="" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <div :class="{ show: showDialog }" class="pledgeDialog">
    <div class="pledgeDialogInner">
      <div class="title">
        <i class="iconfont icon-34_kaisuo"></i> <span>{{ $t('ismsg.pledge.dialog.title') }}</span>
      </div>
      <p class="subtitle">
        {{ $t('ismsg.pledge.dialog.text') }} <span>{{ formatNumber(unlockStakingFees, 8) }} BNB</span>
        {{ $t('ismsg.pledge.dialog.text1') }}
      </p>
      <div class="confirmBtn" @click="doPledgeUsdt">
        <span>{{ $t('ismsg.pledge.dialog.btn') }}</span>
      </div>
      <span class="clock" @click="showDialog = false">×</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch, onMounted, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store/index';
import { useI18n } from 'vue-i18n';
import { formatNumber } from '@/utils/common';
import { util, getSigner, getBnbBalance } from '@/a-wallet';

const router = useRouter();
const { t: lang } = useI18n();
const mainStore = useMainStore();

const showDialog = ref(false);
const pledgeInfo = ref(null);
const unlockStakingFees = ref(0);

onMounted(() => {
  watchEffect(() => {
    if (mainStore.baseData) {
      const { walletAccount, baseData }: any = mainStore;
      unlockStakingFees.value = baseData.pledgeUnlockNeed / baseData.bnbUsdtRatio;
      pledgeInfo.value = baseData.pledgeInfo._id ? baseData.pledgeInfo : null;
    }
  });
});

/**解锁质押功能 */
const doPledgeUsdt = async () => {
  if (mainStore.loading) return;
  const { walletAccount, baseData }: any = mainStore;

  const bnbBalance = await getBnbBalance(walletAccount);
  const gas = (baseData.gasPriceAxie1 * baseData.gasLimitAxie1) / 1e18;
  if (bnbBalance < unlockStakingFees.value + gas) return ElMessage(lang('ismsg.tips.amountNotEnoughBnb'));

  mainStore.setLoading(true);
  try {
    const extraStr = '';
    let extra = '0x';
    for (let i = 0; i < extraStr.length; i++) {
      extra += extraStr.charCodeAt(i).toString(16);
    }

    const tx = await getSigner().sendTransaction({
      to: baseData.pledgeUnlockAddress,
      value: util.parseEther(unlockStakingFees.value.toFixed(6)),
      data: extra
    });
    await tx.wait();
    mainStore.setLoading(false);
    ElMessage.success(lang('ismsg.tips.unlockStakingSuccess'));
  } catch (error) {
    mainStore.setLoading(false);
    console.error('Error sending transaction:', error);
  }
};

const handleClickBtn = () => {
  if (pledgeInfo.value) {
    router.push('/pledge/pledgeDetails');
  } else {
    showDialog.value = true;
  }
};
</script>

<style lang="scss" scoped>
.main {
  position: relative;
}

.pledgeDialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  &.show {
    z-index: 100;
    opacity: 1;
    transition: all 0.3s;
  }

  .pledgeDialogInner {
    max-width: 600px !important;
    width: 80%;
    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
    position: relative;

    .title {
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      line-height: 40px;
      font-family: MFBanHei_Noncommercial-Regular;
      background-image: linear-gradient(to bottom, #f99b36, #f35845);
      -webkit-background-clip: text;
      color: transparent;

      i {
        font-size: 28px;
      }
    }

    .subtitle {
      color: #5a2a16;
      font-size: 16px;
      text-align: center;
      margin: 2vh 0;

      span {
        color: #e65d40;
      }
    }

    .confirmBtn {
      text-align: center;

      span {
        display: inline-block;
        padding: 10px 20px;
        background-color: #6cae86;
        border-radius: 20px;
        color: #fff;
        overflow: hidden;
        cursor: pointer;
      }
    }

    .clock {
      position: absolute;
      top: -9px;
      right: -9px;
      z-index: 100;
      display: inline-block;
      width: 20px;
      line-height: 20px;
      background-color: #fff;
      border: 1px solid #f6a526;
      border-radius: 50%;
      color: #f6a526;
      font-size: 22px;
      text-align: center;
      cursor: pointer;
    }
  }
}

.inner {
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  z-index: 9;

  .left,
  .right {
    padding: 5% 3%;
    background: url('@/assets/images/whiteBg.png') no-repeat left top;
    background-size: 100% 100%;
  }

  .right {
    border-left: thin dashed rgba(3, 0, 0, 0.15);
  }

  .leftCont {
    width: 90%;
    padding-top: 3vh;
    margin: 0 auto;

    .head {
      font-size: 36px;
      font-weight: 700;
      font-family: MFBanHei_Noncommercial-Regular;
      background-image: linear-gradient(to bottom, #f99b36, #f35845);
      -webkit-background-clip: text;
      color: transparent;
    }

    .text {
      font-size: 22px;
      line-height: 28px;
      color: #5a2a16;
      margin: 5vh 0;
      font-weight: 600;
    }

    .btn {
      // width: 356px;
      height: 80px;
      padding-right: 4%;
      margin: 0 auto;
      text-align: center;
      font-size: 24px;
      color: #ffffff;
      font-family: MFBanHei_Noncommercial-Regular;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background: url('@/assets/images/pledge.png') no-repeat left top;
      background-size: 100% 100%;

      span {
        font-size: 32px;
      }
    }
  }

  .rightCont {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
      max-width: 462px;
    }
  }
}

@media screen and (max-width: 992px) {
  .inner {
    padding: 5% 3%;
    background: url('@/assets/images/whiteBg.png') no-repeat left top;
    background-size: 100% 100%;

    .left,
    .right {
      background: none !important;
      border: none;
    }
  }
}

@media screen and (max-width: 768px) {
  .inner {
    width: 90%;
    border-radius: 20px;
    padding-bottom: 2vh;
    overflow: hidden;

    .leftCont {
      width: 90%;
      padding-top: 0;

      .head {
        text-align: center;
        font-size: 22px;
      }

      .text {
        margin: 2vh 0;
        line-height: normal;
      }

      .btn {
        width: 100%;
        font-size: 16px;
        line-height: 50px;
        height: 50px;

        span {
          font-size: 22px;
        }
      }
    }

    .left,
    .right {
      padding: 0;
    }

    .rightCont img {
      width: 70%;
      max-width: 462px;
      margin: 0 auto;
    }
  }
}
</style>
